<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>08 - OL8加载天地图WMTS服务展示地图</title>
    <!--    <script src='../lib/ol4/ol4.js'></script>-->
    <!--    <script src='../lib/ol6.12.0/ol.js'></script>-->
    <script src='../lib/ol8.2.0/ol.js'></script>
    <script src='../lib/proj4/proj4.js'></script>
    <!--        <link rel="stylesheet" href="../css/ol4/ol.css">-->
    <!--    <link rel="stylesheet" href="../css/ol6.14.1/ol.css">-->
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
</body>
<script>
	const projection = ol.proj.get('EPSG:4326');
	const tileSize = 256;
	const projectionExtent = projection.getExtent();
	const origin = [-180.0, 90.0];
	const size = ol.extent.getWidth(projectionExtent) / tileSize;
	let resolutions = [];
	let matrixIds = [];
	for (let z = 0; z < 20; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	const maxZoom = 19;
	const minZoom = 8;
	const zoom = 9;

	//1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125,
	// 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578

	console.log('=========resolutions:', resolutions);
	// resolutions = [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125];//resolutions.slice(3, 5);
	// matrixIds = [0,1,2,3,4,5];//matrixIds.slice(3, 5);

	console.log(resolutions, matrixIds);

	const tileGrid = new ol.tilegrid.WMTS({
		origin,
		resolutions,
		extent: projectionExtent,
		matrixIds
	});

	const url = `http://t0.tianditu.gov.cn/vec_c/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;

	const wmtsSource = new ol.source.WMTS({
		url,
		layer: 'vec',
		matrixSet: 'c',
		format: 'tiles',
		projection,
		tileGrid,
		style: 'default',
		wrapX: false
	});
	// 图层
	const baseLayer = new ol.layer.Tile({
		source: wmtsSource
	});

	const points = [
		[0, 0],
		[110.998735, 30.818967],
		[116.384722, 39.889916],
		[119.97154785156252, 30.40197483062744],
		[105.855593, 32.427233],
		[120.282129049117, 30.392968655169],
		[118.738208, 32.010466],
		[118.731778724192, 32.0035881216276],
		[118.73699118476341, 32.0015568379433]
	];
	const centerPoint = points[7];

	const view = new ol.View({
		// constrainResolution: true,
		center: centerPoint,
		projection,
		zoom,
		maxZoom,
		minZoom,
		resolutions
	});

	const map = new ol.Map({
		layers: [
			baseLayer
		],
		target: 'map',
		view
	});

	console.log(view.getResolution());

</script>
</html>